<template>
  <div class="bottom">
    <h2>图片以实物为准</h2>
    <div class="search">
      <el-input
      @blur="del"
        v-model="input"
        placeholder="请输入内容"
      >
      </el-input>
      <i class="el-icon-search"></i>
    </div>
    <ul v-show="!filter_lists.length ==0">
      <li
        v-for="ele in filter_lists"
        @mouseenter="isactive"
        @mouseleave="noactive"
        :id="ele._id"
      >
        <img
          :src="'http://localhost:3000'+ele.imgUrl"
          alt=""
        >
        <h3>{{ele.name}}</h3>
        <div
          class="cc"
          ref="cc"
        >
          <h1>{{ele.name}}</h1>
          <div class="txt">一定要喝的{{ele.name}}</div>
          <p>{{ele.txt}}</p>
          <div class="price">
            <span>￥{{ele.price.toFixed(2)}}</span>
            <el-button
              type="text"
              @click="addCar($event,ele.name)"
            >添加进购物车</el-button>
          </div>
        </div>
      </li>
    </ul>
    <div v-show="filter_lists.length ==0">暂无此商品</div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Bottom",
  data() {
    return {
      input: "",
      imgUrl: "",
      flag: true,
      top: "300px",
      car: {
        user_id: "",
        name: "",
        price: "",
        account: "",
        time: "",
        imgUrl: "",
        flag: false,
      },
    };
  },
  computed: {
    ...mapState({
      info: (state) => {
        return state.user.info;
      },
    }),
    ...mapState({
      list: (state) => {
        return state.food.list;
      },
    }),
    ...mapState({
      newlist: (state) => {
        return state.food.new_list;
      },
    }),
    // 搜索框
    filter_lists(){
      return this.list.filter(ele=>{
        return ele.name.indexOf(this.input) !== -1
      })
    }
  },
  methods: {
    addCar(e, name) {
      // e.target.parentNode.parentNode.parentNode.classList.remove('active')
      if (localStorage.getItem("name")) {
        const flag = this.newlist.some((ele) => {
          return ele.name === name;
        });
        if (flag) {
          e.target.disabled = !flag;
          this.$message({
            message: "商品已在购物车,请到订单中心确认商品数量",
            duration: 1000,
            type: "warning",
          });
          return;
        } else {
          const res = this.list.find((ele) => {
            return ele.name === name;
          });
          const currentTime = new Date();
          const formattedTime = currentTime.toISOString().slice(0, 10);
          this.car.user_id = this.info.id;
          this.car.name = res.name;
          this.car.account = res.account;
          this.car.imgUrl = res.imgUrl;
          this.car.price = res.price;
          this.car.time = formattedTime;
          this.$store.dispatch("addCar", this.car);
          // this.$store.commit('ADD_NEWList',res)
          this.$message({
            message: "添加成功!",
            type: "success",
            duration: 1000,
          });
        }
      } else {
        this.$alert("请先登录", {
          confirmButtonText: "确定",
        });
        this.$router.push("/login");
      }
    },
    isactive(e) {
      e.target.children[2].classList.add("active");
    },
    noactive(e) {
      e.target.children[2].classList.remove("active");
    },
    del() {
    setTimeout(() => {
      this.input = ""
    }, 200);
  },
  },
};
</script>

<style lang = "less" scoped>
.bottom {
  width: 100%;
  text-align: center;
  h2 {
    margin-left: 20px;
    color: #888;
    font-size: 16px;
    margin-bottom: 10px;
  }
  .search {
    position: relative;
    display: flex;
    justify-content: left;
    .el-input {
      box-sizing: border-box;
      margin-left: 100px;
      width: 200px;
     ::v-deep .el-input__inner{
         padding: 0 30px;
      }
    }
    .el-icon-search {
      left: 110px;
      top: 12px;
      color: #888;
      position: absolute;
      font-size: 18px;
    }
    
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 80px;

    li {
      width: 230px;
      height: 300px;
      position: relative;
      margin-top: 10px;
      margin-left: 20px;
      position: relative;
      text-align: center;
      overflow: hidden !important;
      .cc {
        position: absolute;
        padding: 10px;
        text-align: center;
        top: 300px !important;
        width: 210px;
        height: 280px;
        background-color: red;
        color: #fff;
        transition: all 0.5s;
        h1 {
          font-size: 18px;
        }
        .price {
          font-size: 22px;
          position: absolute;
          top: 250px;
          button {
            margin-left: 50px;
            color: red;
            background-color: #fff;
          }
        }
        p {
          margin-top: 20px;
          display: block;
          text-align: left;
          word-wrap: break-word;
          width: 210px !important;
          font-size: 18px;
          width: 100%;
          line-height: 20px;
        }
        .txt {
          color: red;
          margin-top: 10px;
          width: 210px;
          height: 20px;
          line-height: 20px;
          border-radius: 5px;
          background-color: #fff;
        }
      }
      h3 {
        position: absolute;
        top: 20px;
        left: 40px;
        color: #fff;
        font-size: 20px;
      }
      img {
        display: block;

        width: 230px;
        height: 300px;
        overflow: hidden;
      }
    }
    /* li:hover .cc{
            top: 0px;s
        } */
    .cc.active {
      top: 0px !important;
    }
  }
  .sure {
    overflow: hidden;
    border-radius: 20px;
    color: #fff;
    display: flex;
    line-height: 60px;
    position: fixed;
    width: 200px;
    height: 60px;
    background-color: rgba(8, 8, 8, 0.89);
    bottom: 15px;
    right: 150px;
    .left {
      position: relative;
      font-size: 22px;
      flex: 1;
      i {
        position: relative;
        font-size: 25px;
        margin-right: 10px;
      }
      .number {
        position: absolute;
        line-height: 20px;
        width: 20px;
        height: 20px;
        background-color: red;
        font-size: 12px;
        border-radius: 50%;
        left: 30px;
        top: 3px;
      }
    }
    .right {
      cursor: pointer;
      width: 30%;
      background-color: rgba(238, 11, 11, 0.658);
    }
  }
}
</style>